<template>
<view class="page flex_c">
  <nav-bar text-center title="联系记录" />
  <view class="flex1" style="overflow: hidden">
    <scroll-view
      v-if="totalHeight"
      scroll-y
      style="height: 100%"
      :lower-threshold="150"
      @scrolltolower="onMore"
      refresher-enabled
      :refresher-triggered="triggered"
      @refresherrefresh="onRefresh"
      >
      <view class="card flex_a_c flex_r pr" v-for="item in list" :key="item.id">
        <view class="cover" @click="onLink(item)">
          <image mode="aspectFill" class="profile_photo" :src="item.headOssUrl || 'https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/avatar_default.png'"></image>
          <image v-if="item.authFlag === 2" class="auth_icon" src="https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/auth_icon.png"></image>
        </view>
        <view class="flex1 flex_c pb-18">
          <view class="userName flex_a_c" @click="onLink(item)">
            {{ item.userName }}
            <template v-if="item.messageFlag">
              <image v-if="!item.gender" class="sex" src="https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/boy_icon1.png"></image>
              <image v-else class="sex" src="https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/girl_icon1.png"></image>
            </template>
          </view>
          <view v-if="item.occupationName" class="tags flex_r">
            <view class="tag_item  mr-10" v-for="typeName in item.occupationName.split(',')" :key="typeName">{{ typeName }}</view>
          </view>
        </view>
        <image class="phone" @click="onCallPhone(item)" src="https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/mobile_icon.png"></image>
      </view>
       <van-empty v-if="total === 0" class="pt-60" image="https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/empty.png"
    description="暂无联系人" />
      <view v-if="total && total === list.length" class="all_tip">到底了</view>
    </scroll-view>
  </view>
</view>
<van-dialog id="van-dialog"/>
</template>
<script setup>
import { getViewContactList } from "@/api/center"
import { ref, onBeforeMount, reactive, nextTick, toRefs } from 'vue'
import { onReachBottom, onShow } from '@dcloudio/uni-app'
import storage from '@/utils/storage'
import { getContact } from '@/hook/getContactPhone'
let info = reactive({
	query: {
		pageSize: 30,
		pageCode: 1,
	},
	list: [],
	total: '',
  triggered: false
})
onShow(() => {
  info.list = []
	info.total = ''
	info.query.pageCode = 1
	fnGet()
})
let onLink = (item) => {
  let url = `/pages/ipElite/infomation?id=${item.id}`
  uni.navigateTo({
    url
  })
}
// 下拉到底事件
// onReachBottom(() => {
// 	if (info.total > info.list.length) {
// 		++info.query.pageCode
// 		fnGet()
// 	}
// })
let onMore = () => {
  if (info.total > info.list.length) {
		++info.query.pageCode
		fnGet()
	}
}
let fnGet = async () => {
	const { code, data } = await getViewContactList(info.query)
	if (code === 200) {
		info.list = info.list.concat(data.rows)
		info.total = data.total
    info.triggered = false
	}
}


let onRefresh = () => {
  info.list = []
  info.triggered = true
	info.total = ''
	info.query.pageCode = 1
	fnGet()
}
let onCallPhone = (item) => {
  let isLogin = storage.getStorage('regiterFlag') === 0 ? true : false
  if (!isLogin) {
    uni.navigateTo({
      url: '/pages/login/index'
    })
    return false
  }
  getContact({ viewType: 5, viewId: item.id })
}
let { query, list, total, triggered } = toRefs(info)
</script>
<style lang="scss" scoped>
// @import "/static/style/listsearch.scss";

.page {
  height: 100vh;
  padding-bottom: calc(98rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(98rpx + env(safe-area-inset-bottom));
}
.list_search_txt {
  width: 540rpx;
  height: 59rpx;
  background: #F4F7FC;
  border-radius: 4rpx;
  position: relative;
  .search_icon {
    z-index: 10;
    width: 33rpx;
    height: 33rpx;
    position: absolute;
    top: 15rpx;
    right: 18rpx;
  }
}
.card {
  width: 750rpx;
  height: 150rpx;
  background: #FFFFFF;
  margin-bottom: 2rpx;
  padding-left: 38rpx;
  .cover {
    width: 66rpx;
    height: 66rpx;
    margin-right: 30rpx;
    position: relative;
    background: url(https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/avatar_bg.png) no-repeat left top / cover;
    .profile_photo {
      width: 60rpx;
      height: 60rpx;
      border-radius: 60rpx;
      position: absolute;
      left: 50%;
      bottom: 6rpx;
      transform: translateX(-50%);

    }
    .auth_icon {
      position: absolute;
      width: 24rpx;
      height: 24rpx;
      bottom: -2rpx;
      right: -6rpx;
    }
  }
  .phone {
    width: 68rpx;
    height: 68rpx;
    position: absolute;
    top: 41rpx;
    right: 32rpx;
  }
  .userName {
    font-weight: 500;
    font-size: 30rpx;
    color: #000000;
    line-height: 64rpx;
    height: 64rpx;
    .sex {
      width: 20rpx;
      height: 20rpx;
      margin-left: 10rpx;
    }
  }
  .tags {
    .tag_item {
      min-width: 60rpx;
      padding: 0 6rpx;
      height: 30rpx;
      background: #F0F2F5;
      border-radius: 4rpx;
      font-family: pf_regular;
      font-weight: 400;
      font-size: 24rpx;
      color: #333333;
      text-align: center;
      margin-right: 5rpx;
      line-height: 30rpx;
    }
  }
}

</style>